<template>
  <div class="user-info-container">
    <el-card>
      <div class="user-info-box" id="userInfoBox">
        <!-- 标题 -->
        <h2 class="title">{{ $t('msg.user.userAdd') }}</h2>
        <!-- 头部 -->
        <div class="header">
          <el-form :model="userFrom" label-width="auto" style="width: 100%">
            <el-form-item :label="$t('msg.user.userName')">
              <el-input
                v-model="userFrom.userName"
                :placeholder="$t('msg.user.userNameTips')"
              />
            </el-form-item>

            <el-form-item :label="$t('msg.user.name')">
              <el-input
                v-model="userFrom.name"
                :placeholder="$t('msg.user.nameTips')"
              />
            </el-form-item>
            <el-form-item :label="$t('msg.user.sex')">
              <el-radio-group v-model="userFrom.sex">
                <el-radio :label="1">{{ $t('msg.user.sexMale') }}</el-radio>
                <el-radio :label="2">{{ $t('msg.user.sexFemale') }}</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item :label="$t('msg.user.phone')">
              <el-input
                v-model="userFrom.phone"
                :placeholder="$t('msg.user.phoneTips')"
              />
            </el-form-item>
            <el-form-item :label="$t('msg.user.birthday')">
              <el-date-picker
                v-model="userFrom.birthday"
                type="date"
                :placeholder="$t('msg.user.birthdayTips')"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item :label="$t('msg.user.email')">
              <el-input
                v-model="userFrom.email"
                :placeholder="$t('msg.user.emailTips')"
              />
            </el-form-item>
            <el-form-item :label="$t('msg.user.wechat')">
              <el-input
                v-model="userFrom.wechat"
                :placeholder="$t('msg.user.wechatTips')"
              />
            </el-form-item>
            <el-form-item :label="$t('msg.user.nation')">
              <el-input
                v-model="userFrom.nation"
                :placeholder="$t('msg.user.nationTips')"
              />
            </el-form-item>

            <el-form-item :label="$t('msg.user.married')">
              <el-switch v-model="userFrom.married" />
            </el-form-item>
            <el-form-item :label="$t('msg.user.role')">
              <el-checkbox-group v-model="userFrom.role">
                <el-checkbox
                  v-for="(item, index) in allRoleList"
                  :key="index"
                  :label="item.id"
                  name="type"
                >
                  {{ item.title }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item :label="$t('msg.user.password')">
              <el-input
                v-model="userFrom.password"
                :placeholder="$t('msg.user.passwordTips')"
              />
            </el-form-item>
            <el-form-item :label="$t('msg.user.confirmPassword')">
              <el-input
                v-model="userFrom.confirmPassword"
                :placeholder="$t('msg.user.confirmPasswordTips')"
              />
            </el-form-item>
            <el-form-item :label="$t('msg.user.idCard')">
              <el-input
                v-model="userFrom.idCard"
                :placeholder="$t('msg.user.idCardTips')"
              />
            </el-form-item>
            <el-form-item :label="$t('msg.user.remark')">
              <el-input v-model="userFrom.remark" type="textarea" />
            </el-form-item>
            <el-form-item class="btns">
              <el-button
                type="primary"
                :loading="loading"
                @click="handlerCreate"
                >{{ $t('msg.btn.submit') }}</el-button
              >
              <el-button>{{ $t('msg.btn.cancel') }}</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 内容 -->
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { createUser } from '@/api/user-manage'
import { roleList } from '@/api/role'

import { ElMessage } from 'element-plus'
import { useI18n } from 'vue-i18n'

const i18n = useI18n()

const userFrom = ref({
  userName: '',
  name: '',
  sex: 1,
  phone: '',
  birthday: '',
  email: '',
  wechat: '',
  nation: '',
  married: false,
  role: [],
  password: '',
  confirmPassword: '',
  idCard: '',
  remark: ''
})

const resetForm = () => {
  userFrom.value = {
    userName: '',
    name: '',
    sex: 1,
    phone: '',
    birthday: '',
    email: '',
    nation: '',
    married: false,
    role: [],
    password: '',
    confirmPassword: '',
    idCard: '',
    remark: ''
  }
}

const allRoleList = ref([])
const getRoleList = async () => {
  const result = await roleList({
    page: 1,
    size: 100
  })
  allRoleList.value = result.items
}
getRoleList()
const loading = ref(false)
const router = useRouter()
const handlerCreate = () => {
  loading.value = true
  createUser(userFrom.value)
    .then(() => {
      loading.value = false
      // 登录后操作
      resetForm()
      ElMessage.success(i18n.t('msg.user.addSuccess'))
      router.push('/user/manage')
    })
    .catch((err) => {
      console.log(err)
      loading.value = false
    })
}
</script>

<style lang="scss" scoped>
.user-info-box {
  width: 600px;
  margin: 0 auto;
  .title {
    text-align: center;
    margin-bottom: 40px;
  }
  .header {
    display: flex;
    ::v-deep .el-descriptions {
      flex-grow: 1;
    }
    .btns {
      ::v-deep .el-form-item__content {
        display: block;
        text-align: center;
      }
    }
  }
}
</style>
